<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 头部操作栏 -->
      <div class="layui-form lay-header">
        <div class="toolbar">
          <div class="layui-form-item lay-query-content">
            <div class="lay-query-box">
              <div class="query-lt">
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">类型名称：</label>
                  <div class="layui-input-inline">
                    <input name="name" class="layui-input" type="text" placeholder="请输入类型名称" autocomplete="off" />
                  </div>
                </div>
                <div class="layui-inline">
                  <button class="layui-btn icon-btn color-green" lay-filter="formSubSearchLog" lay-submit layui-form-keyDownSearch="true">查询</button>
                  <button class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置</button>
                </div>
              </div>
              <div class="query-rt"></div>
            </div>
          </div>
        </div>
        <div class="lay-btn-rows">
          <div class="lay-btn-box">
            <div class="lay-btn-lt">
              <button id="deviceTypeBtnAdd" class="layui-btn icon-btn color-reseda">添加</button>
              <button id="configFun" style="display: none" class="layui-btn icon-btn color-reseda" type="button">确认选择</button>
            </div>
            <div class="lay-btn-rt"></div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <table class="layui-table" id="deviceTypeTable" lay-filter="deviceTypeTable"></table>
    </div>
  </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="deviceTypeTableBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="deviceSpecBar">
  <a class="layui-btn layui-btn-xs" lay-event="specTable">规格列表</a>
</script>

<script type="text/html" id="deviceAttrBar">
  <a class="layui-btn  layui-btn-xs" lay-event="attrTable">属性列表</a>
</script>

<!--&lt;!&ndash; 表单弹窗 &ndash;&gt;-->
<!--<script type="text/html" id="deviceTypeForm">-->
<!--    <form lay-filter="deviceTypeForm" class="layui-form model-form">-->
<!--        <input name="id" type="hidden"/>-->

<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">类型名称</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input name="name" placeholder="请输入类型名称" type="text" class="layui-input" lay-verify="required" required autocomplete="off"/>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">类型编号</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input name="code" id="typeCode" placeholder="请输入类型名称" type="text" class="layui-input" lay-verify="required" required autocomplete="off"/>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item" >-->
<!--            <label class="layui-form-label">描述</label>-->
<!--            <div class="layui-input-block">-->
<!--                <textarea id="remark" name="remark" placeholder="请输入描述" class="layui-textarea" autocomplete="off"/>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">是否启用</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input name="isDeleted" type="checkbox" lay-skin="switch" value="1" checked="false" lay-text="启用|停用"/>-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="layui-form-item">-->
<!--            <label class="layui-form-label">排序</label>-->
<!--            <div class="layui-input-block">-->
<!--                <input name="sortNumber" placeholder="请输入排序" type="text" class="layui-input" lay-verify="" required autocomplete="off"/>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-form-item text-right">-->
<!--            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>-->
<!--            <button class="layui-btn" lay-filter="deviceTypeFormSubmit" lay-submit>保存</button>-->
<!--        </div>-->
<!--    </form>-->
<!--</script>-->

<script type="text/html" id="deviceSpecForm">
  <form lay-filter="deviceSpecForm" class="layui-form open-form">
    <div class="open-model">
      <div class="open-auto" style="padding-left: 0">
        <input name="id" type="hidden" />

        <div class="layui-form-item">
          <label class="layui-form-label">设备类型</label>
          <div class="layui-input-block">
            <select name="productTypeId" lay-filter="productTypeId" lay-search lay-verify="required" disabled></select>
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">规格名称</label>
          <div class="layui-input-block">
            <input name="specName" placeholder="请输入规格名称" type="text" class="layui-input" lay-verify="required" required autocomplete="off" />
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">描述</label>
          <div class="layui-input-block">
            <textarea name="remark" placeholder="请输入描述" class="layui-textarea" autocomplete="off" />
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">排序</label>
          <div class="layui-input-block">
            <input name="sortNumber" placeholder="请输入排序" type="text" class="layui-input" lay-verify="" required autocomplete="off" />
          </div>
        </div>

        <div class="layui-form-item" id="btnAddDiv">
          <label class="layui-form-label"></label>
          <div class="layui-input-inline">
            <button id="btnAdd" class="layui-btn" lay-filter="btnAdd" onclick="return false;">添加规格值</button>
          </div>
        </div>
      </div>
      <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" lay-filter="deviceSpecFormSubmit" lay-submit>保存</button>
      </div>
    </div>
  </form>
</script>

<script type="text/html" id="specTable">
  <div class="open-form">
    <div class="open-model">
      <div class="open-auto">
        <!-- 头部操作栏 -->
        <div class="layui-form toolbar">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label w-auto">名称：</label>
              <div class="layui-input-inline mr0">
                <input name="name" class="layui-input" type="text" placeholder="请输入名称" autocomplete="off" />
              </div>
            </div>
            <div class="layui-inline">
              <button class="layui-btn icon-btn" lay-filter="specTableFormSubSearchLog" lay-submit layui-form-keyDownSearch="true"><i class="layui-icon">&#xe615;</i>搜索</button>
              <button id="productSpecBtnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
              <button id="productSpecBtnDel" class="layui-btn icon-btn layui-btn-danger"><i class="layui-icon"></i>批量删除</button>
            </div>
          </div>
        </div>
        <!-- 表格 -->
        <table class="layui-table" id="deviceSpecTable" lay-filter="deviceSpecTable"></table>
      </div>
    </div>
  </div>
</script>

<script type="text/html" id="productTypeForm">
  <form lay-filter="productTypeForm" class="layui-form model-form">
    <input name="id" type="hidden" />
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">类别性质</label>
        <div class="layui-input-block">
          <select id="materialNature" name="materialNature" lay-filter="materialNature"></select>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">上级类别</label>
        <div class="layui-input-block">
          <input name="parentId" id="parentId" type="hidden" value="" />
          <select id="selectParentType" name="selectParentType" lay-filter="materialNature"></select>
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">类别编码</label>
        <div class="layui-input-block">
          <input name="code" placeholder="请输入类别编码" type="text" class="layui-input" lay-verify="required|isOnlyName" required autocomplete="off" />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">类别名称</label>
        <div class="layui-input-block">
          <input name="name" placeholder="请输入类别名称" type="text" class="layui-input" lay-verify="required|isOnlyName" required autocomplete="off" />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">是否终极分类</label>
        <div class="layui-input-block">
          <input type="radio" name="finalClassifyStatus" value="1" title="否" checked />
          <input type="radio" name="finalClassifyStatus" value="0" title="是" />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">是否一物一码</label>
        <div class="layui-input-block">
          <input type="radio" name="thingCodeStatus" value="1" title="否" checked />
          <input type="radio" name="thingCodeStatus" value="0" title="是" />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">是否有质保期</label>
        <div class="layui-input-block">
          <input type="radio" name="guaranteeStatus" value="1" title="否" checked />
          <input type="radio" name="guaranteeStatus" value="0" title="是" />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">是否先进先出</label>
        <div class="layui-input-block">
          <input type="radio" name="inoutStatus" value="1" title="否" checked />
          <input type="radio" name="inoutStatus" value="0" title="是" />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item" id="depreciationTimeDiv" style="display: none">
        <label class="layui-form-label">折旧时长(月)</label>
        <div class="layui-input-block">
          <input name="depreciationTime" placeholder="请输入折旧时长" type="text" class="layui-input" />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">类别维护部门</label>
        <input name="typeServiceDepartment" type="hidden" />
        <div class="layui-input-block" id="selectDepartment"></div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">是否启用</label>
        <div class="layui-input-block">
          <input name="isDeleted" type="checkbox" lay-skin="switch" value="1" checked="false" lay-text="启用|停用" />
        </div>
      </div>
    </div>
    <div class="layui-col-xs6">
      <div class="layui-form-item">
        <label class="layui-form-label">排序</label>
        <div class="layui-input-block">
          <input name="sortNumber" placeholder="请输入排序" type="text" class="layui-input" lay-verify="" required autocomplete="off" />
        </div>
      </div>
    </div>
    <div class="layui-col-xs12">
      <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
          <textarea id="remark" name="remark" placeholder="请输入描述" class="layui-textarea" />
        </div>
      </div>
    </div>
    <div class="layui-form-item text-right">
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
      <button class="layui-btn" lay-filter="productTypeFormSubmit" lay-submit>保存</button>
    </div>
  </form>
</script>

<!-- js部分 -->
<script>
  layui.use(["layer", "form", "table", "laydate", "admin", "laytpl", "tableTreeDj", "config"], function () {
    var $ = layui.jquery;
    var layer = layui.layer;
    var form = layui.form;
    var table = layui.table;
    var laydate = layui.laydate;
    var config = layui.config;
    var admin = layui.admin;
    var upload = layui.upload;
    var laytpl = layui.laytpl;
    var tableTree = layui.tableTreeDj;
    let nowData = {};
    if (typeof parentData !== "undefined") {
      nowData = { ...parentData };
      if (nowData.eventName == "radio" || nowData.eventName == "checkbox") {
        $("#configFun").show();
      }
    }
    var parentId;
    admin.reqSync("enterprise/dict/admin/dictLabel/list?page=1&limit=10&dictType=sys_device_type_code", {}, function (res) {
      if (res.code == 200) {
        parentId = res.data[0].labelValue;
      }
    });
    // 渲染表格
    var insTb = table.render({
      elem: "#deviceTypeTable",
      url: config.base + "enterprise/product/admin/productType/list",
      toolbar: true,
      defaultToolbar: ["filter"],
      page: true,
      where: {
        parentId: parentId
      },
      cellMinWidth: 100,
      cols: [
        [
          { type: "radio", hide: nowData.eventName == "radio" ? false : true },
          { type: "checkbox", hide: nowData.eventName == "checkbox" ? false : true },
          { type: "numbers", title: "序号", fixed: "left" },
          { field: "name", align: "center", title: "类型名称", fixed: "left" },
          { field: "code", align: "center", title: "类型编号" },
          { field: "remark", align: "center", title: "描述" },
          {
            field: "isDeleted",
            align: "center",
            title: "是否启用",
            templet: function (d) {
              if (d.isDeleted) {
                return (
                  '<input name="isDeleted" type="checkbox" lay-skin="switch" value="' + d.id + '" checked="' + d.isDeleted + '" lay-filter="isDeleted"  lay-text="启用|停用"/>'
                );
              } else {
                return '<input name="isDeleted" type="checkbox" lay-skin="switch" value="' + d.id + '" lay-filter="isDeleted"   lay-text="启用|停用"/>';
              }
            }
          },
          { align: "center", toolbar: "#deviceSpecBar", title: "规格管理", width: 200 },
          { align: "center", toolbar: "#deviceAttrBar", title: "属性管理", width: 200 },
          { field: "createTime", align: "center", title: "创建时间", width: 170 },
          { align: "center", toolbar: "#deviceTypeTableBar", title: "操作", width: 180, fixed: "right" }
        ]
      ],
      done: function (res, curr, count) {
        //移除按钮
        var menuButton = config.getMenuButton(location.hash);
        // if (menuButton.indexOf("搜索") == -1) {
        //   $(".layui-form.toolbar").remove();
        // }
        // if (menuButton.indexOf("修改") == -1) {
        //   $("[lay-event='edit']").remove();
        // }
        // if (menuButton.indexOf("删除") == -1) {
        //   $("[lay-event='del']").remove();
        // }
      }
    });
    $("#configFun").click(function () {
      let list = table.checkStatus("deviceTypeTable").data;
      childData.list = list;
      layer.close(nowData.zindex);
    });
    // 工具条点击事件
    table.on("tool(deviceTypeTable)", function (obj) {
      var data = obj.data;
      if (obj.event === "edit") {
        //修改
        data.eventType = "edit";
        showEditModel(data);
      } else if (obj.event === "del") {
        // 删除
        doDelete(obj);
      } else if (obj.event == "addSpec") {
        data.eventType = "addSpec";
        showEditSpecModel(data);
      } else if (obj.event == "specTable") {
        showSpecTableModel(data);
      } else if (obj.event == "addAttr") {
        data.eventType = "addAttr";
        showEditAttrModel(data);
      } else if (obj.event == "attrTable") {
        showAttrTableModel(data);
      }
    });

    form.on("switch(isDeleted)", function (obj) {
      if (obj.elem.checked) {
        enable(obj.value);
      } else {
        disable(obj.value);
      }
    });

    function enable(id) {
      admin.req(
        "enterprise/product/admin/productType/enable",
        { id: id },
        function (res) {
          if (res.code == 200) {
            layer.msg(res.msg, { icon: 1 });
            table.reload("deviceTypeTable");
          } else {
            layer.msg(res.msg, { icon: 2 });
          }
        },
        "POST"
      );
    }

    function disable(id) {
      admin.req(
        "enterprise/product/admin/productType/disable",
        { id: id },
        function (res) {
          if (res.code == 200) {
            layer.msg(res.msg, { icon: 1 });
            table.reload("deviceTypeTable");
          } else {
            layer.msg(res.msg, { icon: 2 });
          }
        },
        "POST"
      );
    }

    //spec table
    function showSpecTableModel(data) {
      admin.putTempData("data", data ? data : null);
      admin.formOpen({
        area: "1440px",
        offset: ["180px", "350px"],
        title: "物料规格管理",
        path: "components/product/productType/productSpec.html",
        success: function () {}
      });
    }

    //attr table
    function showAttrTableModel(data) {
      admin.putTempData("data", data ? data : null);
      admin.formOpen({
        area: "1540px",
        offset: ["180px", "300px"],
        title: "物料属性管理",
        path: "components/product/productType/productAttr.html",
        success: function () {}
      });
    }

    //监听排序
    table.on("sort(deviceTypeTable)", function (obj) {
      table.reload("deviceTypeTable", {
        initSort: obj,
        where: {
          sort: obj.field,
          order: obj.type
        }
      });
    });

    // 搜索
    form.on("submit(formSubSearchLog)", function (data) {
      insTb.reload({ where: data.field, page: { curr: 1 } }, "data");
    });

    // 重置搜索
    form.on("submit(resets)", (data) => {
      $(".lay-header").find("select").val("");
      $(".lay-header").find("input").val("");
      let field = data.field;
      for (let key in field) {
        field[key] = "";
      }
      insTb.reload({ where: field, page: { curr: 1 } }, "data");
    });

    // 添加按钮点击事件
    $("#deviceTypeBtnAdd").click(function () {
      var addData = {};
      addData.eventType = "add";
      showEditModel(addData);
    });

    // 显示编辑弹窗
    function showEditModel(data) {
      admin.open({
        type: 1,
        area: "840px",
        // offset: ['180px', '600px'],
        title: data.id  ? "修改设备类别" : "添加设备类别",
        content: $("#productTypeForm").html(),
        success: function () {
          //类别性质
          $("#materialNature").append(new Option("资产类", "3")).prop("disabled", true).selected;
          $("#depreciationTimeDiv").show();
          $("#selectParentType").append(new Option("生产设备", parentId)).prop("disabled", true).selected;
          $("#parentId").val(parentId);
          //类别维护部门
          admin.initDataSelectTree(true, "user/admin/role/getTreeData", null, "selectDepartment", data.typeServiceDepartment, "类别维护部门", "typeServiceDepartment", null);

          form.val("productTypeForm", data);

          form.verify({
            isOnlyName: function (value) {
              var isOnly = true;
              var idVal = $("form input[name='id']").val();
              admin.req(
                "enterprise/product/admin/productType/isOnly",
                {
                  name: value,
                  id: idVal
                },
                function (res) {
                  if (res.code == 200) {
                    isOnly = res.data;
                  }
                },
                "GET",
                false
              );
              if (!isOnly) {
                return "名称必须唯一";
              }
            }
          });

          form.val("productTypeForm", data);
          form.render();

          // 表单提交事件
          form.on("submit(productTypeFormSubmit)", function (d) {
            layer.load(2);

            var isDeleted = $("form input[name='isDeleted']").prop("checked");
            if (!isDeleted) {
              d.field.isDeleted = false;
            } else {
              d.field.isDeleted = true;
            }
            admin.req(
              data.eventType == "edit" ? "enterprise/product/admin/productType/update" : "enterprise/product/admin/productType/add",
              d.field,
              function (res) {
                layer.closeAll("loading");
                if (res.code == 200) {
                  layer.msg(res.msg, { icon: 1 });
                  table.reload("productTypeTable");
                  layer.closeAll("page");
                  insTb.reload()
                } else {
                  layer.msg(res.msg, { icon: 2 });
                }
              },
              data.eventType == "edit" ? "PUT" : "POST"
            );
            return false;
          });
        }
      });
    }

    // 删除
    function doDelete(obj) {
      layer.confirm(
        "确定要删除吗？",
        {
          offset: "65px",
          skin: "layui-layer-admin"
        },
        function (i) {
          layer.close(i);
          layer.load(2);
          admin.req(
            "enterprise/product/admin/productType/" + obj.data.id,
            {},
            function (res) {
              layer.closeAll("loading");
              if (res.code == 200) {
                layer.msg(res.msg, { icon: 1 });
                obj.del();
              } else {
                layer.msg(res.msg, { icon: 2 });
              }
            },
            "DELETE"
          );
        }
      );
    }

    // 导出excel
    $("#productTypeBtnExport").click(function () {
      var checkRows = table.checkStatus("deviceTypeTable");
      if (checkRows.data.length == 0) {
        layer.msg("请选择要导出的数据", { icon: 2 });
      } else {
        table.exportFile(insTb.config.id, checkRows.data, "xls");
      }
    });
  });
</script>
